window.addEventListener('load', function() {
    const banner = document.querySelector('.banner')
    const arrowL = document.querySelector('.arrow-l')
    const arrowR = document.querySelector('.arrow-r')
    const ul = document.querySelector('.img-box')
    const ol = document.querySelector('.circle')
    const ulWidth = banner.offsetWidth
    let circle = 0
    let num = 0
    let timer = null
    let flag = false

    banner.addEventListener('mouseenter', function() {
        arrowL.style.display = 'block'
        arrowR.style.display = 'block'
        clearInterval(timer)
        timer = null
    })

    banner.addEventListener('mouseleave', function() {
        arrowL.style.display = 'none'
        arrowR.style.display = 'none'
        timer = setInterval(() => {
            arrowR.click()
        }, 2000)
    })

    for (let i = 0; i < ul.children.length; i++) {
        const li = document.createElement('li')
        ol.appendChild(li)
        li.setAttribute('index', i)
        li.addEventListener('click', function() {
            const index = +this.getAttribute('index')
            circle = index
            circleChange()
            animate(ul, -ulWidth * index)
        })    
    }

    ol.children[0].className = 'current'

    const first = ul.children[0].cloneNode(true);
    ul.appendChild(first)
    
    arrowR.addEventListener('click', function() {
        if (!flag) {
            flag = true
            if (num === ul.children.length - 1) {
                ul.style.left = 0
                num = 0
            }
            num++;
            animate(ul, -num * ulWidth, function() {
                flag = false
            })
            circle++
            if (num === ol.children.length) {
                circle = 0
            }
            circleChange()
        }
    })

    arrowL.addEventListener('click', function() {
        if (!flag) {
            flag = true
            if (num === 0) {
                num = ul.children.length - 1
                ul.style.left = -ul.children.length * ulWidth + 'px'
            }
            num--
            animate(ul, -num * ulWidth, function() {
                flag = false
            })
            circle--
            circle = circle < 0 ? ol.children.length - 1 : circle
            circleChange()
        }
    })

    timer = setInterval(() => {
        arrowR.click()
    }, 2000)

    function circleChange() {
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = ''
        }
        ol.children[circle].className = 'current'
    }

    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
    
        }, 15);
    }
})